<template>
	<el-dialog title="" width="1000px" :visible.sync="dialogTableVisible" :append-to-body='true'>
		<div class="alert-box">
			<i class="el-icon-close close" @click="cancel" style="color: white;z-index:10;"></i>
			<div class="bt">选择物品</div>
			<div style="overflow: hidden;">
				<div class="xxx" style="float: left;width: 20%;margin-top:20px;">
				<div class="wpfl" style="text-align: center;font-size: 16px;background: #C0CCDA;color: white;line-height: 30px;">物品分类</div>
				<div class="wpszlt1">
					<el-collapse v-model="activeNames">
						<el-collapse-item title=" ★  教材类" v-if='jcxx' name="1">
							<div v-for='v in comboxlistjc' :class="v.classname" style="border: 1px #CCCCCC;">
								<div class="jclt" @click="wpfxbtnclickjc(v.id)">{{v.mc}}</div>
							</div>
						</el-collapse-item>
						<el-collapse-item title=" ★   学习用品类" v-if='jcxx' name="2">
							<div v-for='v in comboxlistxx' :class="v.classname">
								<div class="jclt" @click="wpfxbtnclickjc(v.id)">{{v.mc}}</div>
								<!--<el-button style="width:35px; height: 50px;" type="text" @click="componentsShow('fledit',v)" icon="el-icon-edit"></el-button>-->
							</div>
						</el-collapse-item>
						<el-collapse-item title=" ★   固定资产类" v-if='gdzc' name="3">
							<div v-for='v in comboxlistgd' :class="v.classname">
								<div class="jclt" @click="wpfxbtnclickjc(v.id)">{{v.mc}}</div>
							</div>
						</el-collapse-item>
						<el-collapse-item title=" ★  易耗品类" v-if='yhp' name="4">
							<div v-for='v in comboxlistyh' :class="v.classname">
								<div class="jclt" @click="wpfxbtnclickjc(v.id)">{{v.mc}}</div>
							</div>
						</el-collapse-item>
					</el-collapse>
				</div>
			</div>
			<div class="left">
				<div class="search">
					<el-input v-model="vkeyword" placeholder="请输入物品名称" class="input"></el-input>
					<!--<el-checkbox @change="search()" v-model="vispj">配件</el-checkbox>-->
					<el-button type="primary" class="btn" @click="search">搜索</el-button>
					<el-button type="success" class="add btn" @click="submit">确定</el-button>
					<el-button type="danger" class="add btn" @click="cancel">退出</el-button>

				</div>

				<!-- 数据表格展示区域 -->
				<el-table :data="dataList" ref="multipleTable" border show-summary stripe align="center" class="admin-table" :row-class-name="tableRowClassName" row-key="id" @select="checkSelect">
					<!--@select-all="checkall"-->

					<el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column>

					<el-table-column :prop="v.prop" :label="v.label" v-for="(v,index) in portTitleList" align="center" show-overflow-tooltip v-if="v.hide != 0" :formatter="v.formatter" :align="v.align || 'center'" :fixed="v.fixed" :class-name="v.columnStyle" :width="v.width" :min-width="v.minWidth" :header-align="v.headerAlign || 'center'">
						<template scope="scope">
							<div slot="reference" :style="tableCellControl(scope)">
								{{ scope.row[scope.column.property] }}
							</div>
						</template>
					</el-table-column>
				</el-table>

				<!-- 分页查询区域 -->
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="pageindex" :page-sizes="pagesizes" :page-size="pagesize" :layout="layout" :total="total" class="class-page">
				</el-pagination>
			</div>

			<div class="right">
				<div class="choose">
					<ul class="header">
						<li class="first">
							<div>
								<span>已选择:</span>
								<span class="number">{{multipleList.length}}</span>
							</div>
							<span class="del el-icon-delete" @click="del()">
                                <i></i>
                            </span>
						</li>
						<li v-for="(v,index) in multipleList">
							<span class="name ellipsis">{{v.mc}}</span>
							<span class="del el-icon-delete" @click="del(multipleList[index])">
                                <i></i>
                            </span>
						</li>
					</ul>
				</div>
				<!-- <el-button @click="toggleSelection(multipleList)">asdasdsadas</el-button> -->
			</div>
			</div>
			

			<!-- 动画加载 -->
			<LoadingComponent v-show="isLoading"></LoadingComponent>
		</div>
	</el-dialog>
</template>

<script>
	import { mapState } from 'vuex'
	import LoadingComponent from 'components/loading'
	import qs from 'qs'
	export default {
		props: ['params'],
		components: {
			LoadingComponent
		},
		data() {
			return {
				vispj: false,
				jcxx: true,
				gdzc: true,
				yhp: true,
				wpfl: '',
				activeNames: ['1'],
				comboxlistjc: [], //下拉框 动态的
				comboxlistxx: [], //下拉框 动态的
				comboxlistgd: [], //下拉框 动态的
				comboxlistyh: [], //下拉框 动态的
				vkeyword: '',
				vwpflid: '',
				multipleList: [],
				comboxlist: [],
				dataList: [], //表格数据
				vselectwpid: '',
				dialogTableVisible: true,
				vselectwpfxid: '',

				/*
				    prop :  接口参数名
				    label : 接口中文名
				    hide : 是否隐藏这一列
				    align : 这一列对齐顺序 ： left,right,center
				    headerAlign : 这一列表头对齐方式 ： left,right,center
				*/
				portTitleList: [{
						prop: 'id',
						label: 'ID',
						hide: 0,
						align: 'center',
						fixed: false,
						width: '',
						minWidth: '',
						headerAlign: 'center',
						formatter: function(row, column) {}
					},
					{
						prop: 'wpflid',
						label: '物品分类id-T_wpfl.id',
						hide: 0,
						align: 'center',
						fixed: false,
						width: '',
						minWidth: '',
						headerAlign: 'center',
						formatter: function(row, column) {}
					},
					{

						prop: 'mc',
						label: '名称',
						hide: 1,
						align: 'center',
						fixed: false,
						width: '',
						minWidth: '',
						headerAlign: 'center',
						formatter: function(row, column) {}
					},
					{
						prop: 'kcsl',
						label: '库存数量',
						hide: 1,
						align: 'center',
						fixed: false,
						width: '',
						minWidth: '',
						headerAlign: 'center',
						formatter: function(row, column) {}
					},
					{
						prop: 'jg1',
						label: '价格/单价',
						hide: 1,
						align: 'center',
						fixed: false,
						width: '',
						minWidth: '',
						headerAlign: 'center',
						formatter: function(row, column) {}
					},
					{
						prop: 'jg',
						label: '价格',
						hide: 0,
						align: 'center',
						fixed: false,
						width: '',
						minWidth: '',
						headerAlign: 'center',
						formatter: function(row, column) {}
					},
					{
						prop: 'dw',
						label: '单位',
						hide: 0,
						align: 'center',
						fixed: false,
						width: '',
						minWidth: '',
						headerAlign: 'center',
						formatter: function(row, column) {}
					},
					{
						prop: 'ispjmc',
						label: '配件',
						hide: 1,
						align: 'center',
						fixed: false,
						width: '',
						minWidth: '',
						headerAlign: 'center',
						formatter: function(row, column) {}
					}

				],

				/*动画加载*/
				isLoading: true, //动画加载
				searchLoading: false, //搜索按钮触发按钮动画

				/*分页属性设置*/
				layout: 'total, sizes, prev, pager, next, jumper', //组件布局
				pageindex: 1, //当前分页页码
				pagesizes: [4, 8, 12, 16], //显示个数的选择器选项
				pagesize: 4, //每页显示条目数
				total: 0, //总条数

				dropDownData: '', //
			}
		},
		created() {
			if(this.params == '12') {
				this.gdzc = false;
				this.yhp = false;
			} else if(this.params == '3') {
				this.jcxx = false;
				this.yhp = false;
			} else if(this.params == '4') {
				this.jcxx = false;
				this.gdzc = false;
			}
			//加载页面时调用
			this.wpfl = this.params;
			this.search(); //分页获取默认数据
			this.getcomboxlist();
			this.isLoading = true; //动画开始
		},
		mounted() {},
		methods: {
			wpfxbtnclickjc(wpfxid) {
				this.vselectwpfxid = wpfxid;
				this.setrowselected();
				this.search();
			},
			setrowselected() {
				for(let i in this.comboxlistjc) {
					this.comboxlistjc[i].classname = 'jc';
					if(this.comboxlistjc[i].id == this.vselectwpfxid) {
						this.comboxlistjc[i].classname = 'jc2';
					}
				}
				for(let i in this.comboxlistxx) {
					this.comboxlistxx[i].classname = 'jc';
					if(this.comboxlistxx[i].id == this.vselectwpfxid) {
						this.comboxlistxx[i].classname = 'jc2';
					}
				}
				for(let i in this.comboxlistgd) {
					this.comboxlistgd[i].classname = 'jc';
					if(this.comboxlistgd[i].id == this.vselectwpfxid) {
						this.comboxlistgd[i].classname = 'jc2';
					}
				}
				for(let i in this.comboxlistyh) {
					this.comboxlistyh[i].classname = 'jc';
					if(this.comboxlistyh[i].id == this.vselectwpfxid) {
						this.comboxlistyh[i].classname = 'jc2';
					}
				}
			},
			//      	wpbtnclick(wpid) {
			//				this.vselectwpid = wpid;
			//				for(let i in this.comboxlist) {
			//						this.comboxlist[i].classname = 'jc';
			//						if(this.comboxlist[i].id==this.vselectwpid){
			////							alert(this.vselectwpfxid);
			//						this.comboxlist[i].classname = 'jc2';
			//						}
			//				}
			//				this.search();
			//			},
			getcomboxlist() {
				var logininfo = JSON.parse(localStorage.logininfo);
				this.searchLoading = true;
				var params2 = qs.stringify({
					ms: '1',
					yhid: logininfo.id,
					xxid: logininfo.xxid
				})
				//执行
				this.axios.post(this.$store.state.api + 'wpfl/getlist1', params2)
					.then(res => {
						let data = res.data.data;
						let list = data.list;
						this.comboxlistjc = list;
					}).catch(res => {
						this.searchLoading = false;
					})
				var params2 = qs.stringify({
					ms: '2',
					yhid: logininfo.id,
					xxid: logininfo.xxid
				})
				//执行
				this.axios.post(this.$store.state.api + 'wpfl/getlist1', params2)
					.then(res => {
						this.flid = res.data.data.list[0].id;
						let data = res.data.data;
						let list = data.list;
						this.comboxlistxx = list;
					}).catch(res => {
						this.searchLoading = false;
					})

				var params2 = qs.stringify({
					ms: '3',
					yhid: logininfo.id,
					xxid: logininfo.xxid
				})

				this.axios.post(this.$store.state.api + 'wpfl/getlist1', params2)
					.then(res => {
						this.flid = res.data.data.list[0].id;
						let data = res.data.data;
						let list = data.list;
						this.comboxlistgd = list;
					}).catch(res => {
						this.searchLoading = false;
					})

				var params2 = qs.stringify({
					ms: '4',
					yhid: logininfo.id,
					xxid: logininfo.xxid
				})

				this.axios.post(this.$store.state.api + 'wpfl/getlist1', params2)
					.then(res => {
						this.flid = res.data.data.list[0].id;
						let data = res.data.data;
						let list = data.list;
						this.comboxlistyh = list;
					}).catch(res => {
						this.searchLoading = false;
					})
				this.setrowselected();
			},
			tableRowClassName(row, index) { //隔行变色颜色设置
				/*if ( index%4 == 0) {
				    return "table-cell-green";
				}else if( index%4 == 1 ){
				    return "table-cell-yellow";
				}else if( index%4 == 2 ){
				    return "table-cell-red";
				}else{
				    return "table-cell-blue"
				}*/
			},
			tableCellControl(scope) { //表格单元格控制CSS样式
				/*if (scope.row.id == 112 && scope.column.property == "iname") {
				    return {
				        color:"red",
				    }
				}else{
				    return {
				        color:"green",
				    }
				}*/
			},
			// selectable (row, index) {
			//     console.log(row,index)
			//     return true
			// },
			search() { //查询搜索触发事件
				var logininfo = JSON.parse(localStorage.logininfo); //获取学校  用户id
				this.searchLoading = true;
				var params3 = qs.stringify({
					yhid: logininfo.id,
					xxid: logininfo.xxid,
					wpfl: this.wpfl,
					wpflid: this.vselectwpfxid,
					keyword: this.vkeyword,
					sfsj: 'Y',
					ispj: this.vispj,
					pageindex: this.pageindex,
					pagesize: this.pagesize
				});
				this.axios.post(this.$store.state.api + 'wpfx/list', params3)
					.then(res => {
						//              	  console.log(res,'ssssssssssss')
						this.isLoading = false; //动画结束
						let data = res.data.data;
						let list = data.list;
						this.total = data.totalPage;
						this.dataList = list;
						this.searchLoading = false;
					}).catch(res => {
						this.searchLoading = false;
					})
			},
			submit() {
				let arr = [];
				this.multipleList.forEach(function(v, i) {
					arr.push({
						id: v.id,
						wpflid: v.wpflid,
						wpflmc: v.wpflmc,
						mc: v.mc,
						dw: v.dw,
						zk: 100,
						jg1: v.jg1,
						number: 1,
						jg: v.jg,
						jcjg: v.jg,
						sonlist:v.sonlist,
						model:v.model,
						zid:v.zid,
						pid:v.pid,
						//                      zj:v.zj,
						kcsl: v.kcsl,
						yjje: (v.jg * 1 * 100 * 1 / 100)
					})
				})
				this.$emit('close', {
					type: 'xzwp',
					cancel: false,
					data: arr
				})
			},
			del(obj) {
				if(obj) {
					this.$refs.multipleTable.toggleRowSelection(obj, false);
				} else {
					this.$refs.multipleTable.clearSelection();
					this.multipleList = [];
				}
			},
			handleSizeChange(val) { //每页显示条数触发事件
				this.pagesize = val;
				this.pageindex = 1;
				this.search();
			},
			handleCurrentChange(val) { //分页触发事件
				this.search();
			},
			checkSelect(selection, row) { //点击单选select触发事件
				this.multipleList = selection;
				console.log(this.multipleList, 56565)
				// this.multipleList.push({
				//     id:
				// })
				// let strID = [];
				// selection.forEach(function(v,i){
				//     strID.push(v.id)
				// })
				// this.multipleDelNum = strID.join(",");
			},
			//          checkall (selection) {//点击全选select触发事件
			//              this.multipleList = selection;
			// let strID = [];

			// selection.forEach(function(v,i){
			//     strID.push(v.id)
			// })
			// // console.log(strID.join(","))
			// this.multipleDelNum = strID.join(",");
			//          },
			cancel() {
				this.$emit('close', {
					type: 'xzwp',
					cancel: true
				})
			},
			/* 组件的弹框  */
			componentsShow(type, data) { //显示组件
				for(let i in this.componentList) {
					if(type == this.componentList[i].type) {

						this.componentList[i].toggle = true;
						this.componentList[i].params = data;

						if(this.componentList[i].data.type == 'single') {
							this.componentList[i].data.index = data.row.id

						} else if(this.componentList[i].data.type == 'multiple') {
							this.componentList[i].data.index = this.multipleDelNum;

						} else {
							return;
						}
						return;
					}
				}
			},
			componentsHide(setting) { //关闭组件
				for(let i in this.componentList) {
					if(setting.type == this.componentList[i].type) {
						this.componentList[i].toggle = false;

						if(!setting.cancel) {
							this.search();
						}
						return;
					}
				}
			}

		},
		computed: {
			...mapState([
				'api' //域名
			])
		}
	}
</script>

<style lang="less" scoped>
	.alert-box {
		text-align: left;
		min-width: 1000px;
		height: 80%;
		overflow: hidden;
	}
	
	.bt {
		position: absolute;
		width: 100%;
		height: 50px;
		margin: 0 auto;
		top: 0;
		left: 0;
		background: #50BFFF;
		color: white;
		text-align: left;
		line-height: 50px;
		font-size: 17px;
		padding-left: 15px;
	}
	
	.jc {
		width: 100%;
		height: 50px;
		float: left;
		background: white;
		border-bottom: 1px solid #CCCCCC;
	}
	
	.jc2 {
		width: 100%;
		height: 50px;
		float: left;
		background: #71BFF4;
		border-bottom: 1px solid #CCCCCC;
	}
	
	.jc:hover {
		background: #C0CCDA;
	}
	
	.jclt {
		width: 100%;
		height: 50px;
		float: left;
		font-size: 16px;
		text-align: center;
		line-height: 50px;
		/*border-right: 1px solid #CCCCCC;*/
		cursor: pointer;
	}
	
	.left,
	.right {
		display: inline-block;
		vertical-align: top;
	}
	
	.left {
		width: 50%;
		min-width: 440px;
		float: left;
		margin-top: 20px;
	}
	
	.right {
		width: 20%;
		max-height: 500px;
		float: left;
		overflow: auto;
		margin-top: 20px;
		margin-left: 20px;
		.choose {
			box-shadow: 0px 0px 10px #969696;
			border-radius: 10px;
		}
		.header {
			li {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 10px 20px;
				.del {
					cursor: pointer;
					position: relative;
					&:hover i {
						position: absolute;
						left: 50%;
						top: 50%;
						transform: translate(-50%, -50%);
						width: 25px;
						height: 25px;
						border-radius: 50%;
						background: rgba(0, 0, 0, 0.2);
					}
				}
			}
			.first {
				background: #EEF1F4;
				.number {
					min-width: 10px;
					padding: 2px 7px;
					font-weight: 700;
					border-radius: 10px;
					background: #FF4949;
					color: #fff;
				}
			}
		}
	}
	
	.input {
		width: 150px;
		margin-left: 3px;
	}
	
	.btn {
		width: 80px;
		padding: 7px 15px;
	}
	
	.el-button+.el-button {
		margin-left: 2px;
	}
	
	.admin-table {
		margin-top: 10px;
	}
	
	h2 {
		line-height: 30px;
		text-align: center;
		font-weight: 700;
		margin-bottom: 20px;
	}
	
	.class-page {
		margin-top: 10px;
	}
</style>